<template>
	<!-- 进行中订单详情 -->
	<view class="container" v-if="isloding">
		<view class="top">
			<image :src="info.driver.avatar" mode=""></image>
			<view class="info">
				<view class="text">
					{{info.driver.nickname}} ({{info.driver.phone}})
				</view>
				<view class="num">
					{{info.driver.car_num}}
				</view>
			</view>
			<view class="boda" @tap="boda">
				拨打
			</view>
		</view>
		<view class="mid">
			<view class="mid_title">
				<view class="time">
					开始时间：{{info.created_at}}
				</view>
				<view class="orderNumber">
					订单号：{{info.order_no}}
				</view>
			</view>
			<view class="address">
				<view class="qi">
					<image src="../../../static/icon/qidian.png" mode=""></image>
					<view class="qi_title">
						{{info.start}}
						<!-- <view class="qi_title_text">
							亚太商谷5栋-附24号
						</view> -->
					</view>
				</view>
				<view class="qi">
					<image src="../../../static/icon/zhongdian.png" mode=""></image>
					<view class="qi_title">
						{{info.end}}
						<!-- <view class="qi_title_text">
							亚太商谷5栋-附24号
						</view> -->
					</view>
				</view>
				<view class="openAddress" @tap="openAddress(info)">
					查看
				</view>
			</view>
			<view class="information">
				<view class="item">
					<image src="../../../static/icon/cheliang.png" mode=""></image>
					<view class="item_text" v-if="info.type==0">
						订单车型：吊运/{{name}}
					</view>
					<view class="item_text" v-if="info.type==1">
						订单车型：道路救援/{{name}}
					</view>
					<view class="item_text" v-if="info.type==2">
						订单车型：高空作业/{{name}}
					</view>
				</view>
				<view class="item">
					<image src="../../../static/icon/huowu.png" mode=""></image>
					<view class="item_text">
						货物信息：{{info.remark}}
					</view>
				</view>
				<view class="item">
					<image src="../../../static/icon/lianxiren.png" mode=""></image>
					<view class="item_text">
						联系人：{{info.consignee}}
					</view>
				</view>
				<view class="item">
					<image src="../../../static/phne.png" mode=""></image>
					<view class="item_text">
						联系人电话：{{info.consignee_phone}}
					</view>
				</view>
				<view class="item">
					<image src="../../../static/icon/yibiaopan.png" mode=""></image>
					<view class="item_text">
						预计公里：{{info.predistance/1000}}公里
					</view>
				</view>
				<view class="item">
					<image src="../../../static/icon/tixian.png" mode=""></image>
					<view class="item_text">
						预支付：￥ {{info.prepayment}}
					</view>
					<!-- <view class="mingxi">
						价格明细
					</view> -->
				</view>
				<view class="tips">
					（当前金额为预估价格，最终价格以实际里程数计算）
				</view>
			</view>
		</view>
		<view class="btn" @tap="wancheng" v-if="info.status==12||info.status==22||info.status==34">
			结算
		</view>
		<view class="btn" @tap="weiwancheng" style="background: #b5b5b5;" v-if="info.status!=12&&info.status!=22&&info.status!=34">
			结算
		</view>
		<view class="payment" v-if="paySelect">
			<view class="paymentez">
				<view class="title">
					订单超时,请选择支付方式
				</view>
				<view class="itemBox">
					<view class="item" @tap="payOne">
						<image src="../../../static/yue.png" mode=""></image>
						<view class="text">
							余额支付
						</view>
						<view class="quan">
							<view class="Selection" v-if="payNum==20">
								
							</view>
						</view>
					</view>
					<view class="item" @tap="payTwo">
						<image src="../../../static/icon/wechat.png" mode=""></image>
						<view class="text">
							微信支付
						</view>
						<view class="quan">
							<view class="Selection" v-if="payNum==0">
								
							</view>
						</view>
					</view>
					<view class="item" @tap="payThree">
						<image src="../../../static/alipay.png" mode=""></image>
						<view class="text">
							微信支付
						</view>
						<view class="quan">
							<view class="Selection" v-if="payNum==0">
								
							</view>
						</view>
					</view>
				</view>
				<view class="payBtn">
					<view class="qx" @tap="CancellationPayment">
						取消支付
					</view>
					<view class="qx" @tap="confirmPayment">
						确认支付
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token:'',
				isloding:false,
				info:'',
				phone:'',
				payNum:20  ,//支付方式   20为余额  0为微信小程序 2为支付宝
				paySelect:false,//支付选择弹窗
				reid:-1   ,//	超时订单id
				name:''
			};
		},
		onLoad(e) {
			console.log(e)
			this.name=e.name
			this.token=e.token
			uni.request({
				url: this.webUrl+'/user/job/read/'+e.id,
				method: 'GET',
				header:{
					token:e.token
				},
				data: {},
				success: res => {
					console.log(res)
					uni.hideLoading()
					this.isloding=true
					if(res.data.code==0){
						this.info=res.data.data
						this.phone=res.data.data.driver.phone
					}else if(res.data.code==3){
						uni.showToast({
							title: res.data.msg,
							icon:'none',
							duration:2000
						});
					}else{
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					}
				},
				fail: () => {
					uni.showToast({
						title: '网络错误',
						icon:'none',
						duration:2000
					});
				},
				complete: () => {}
			});
		},
		methods:{
			payOne(){
				if(this.payNum==20){
					this.payNum=-1
				}else{
					this.payNum=20
				}
			},
			payTwo(){
				if(this.payNum==2){
					this.payNum=-1
				}else{
					this.payNum=2
				}
			},
			payThree(){
				if(this.payNum==10){
					this.payNum=-1
				}else{
					this.payNum=10
				}
			},
			boda(){
				uni.makePhoneCall({
				    phoneNumber: this.phone//仅为示例
				});
			},
			weiwancheng(){
				uni.showToast({
					title: '司机尚未完成订单，暂时无法完成',
					icon:'none',
					duration:2000
				});
			},
			wancheng(){
				uni.showModal({
					title: '结算订单',
					content: '是否要结算订单',
					success: (res)=> {
						if (res.confirm) {
						   uni.showLoading({
							title: '加载中',
							mask: false
						   });
						   uni.request({   //结算订单
							url: this.webUrl+'/user/job/action',
							method: 'PUT',
							header:{
								token:this.token
							},
							data: {
								id:this.info.id,
								status:3
							},
							success: res => {
								uni.hideLoading()
								console.log(res)
								if(res.data.code==0){
									if(res.data.data.reid==0){
										uni.showToast({
											title: '操作成功',
											icon:'none',
											duration:2000
										});
										setTimeout(()=>{
											uni.navigateBack({
												delta: 1
											});
										},1500)
									}else{   //调取支付
										this.paySelect=true
										this.reid=res.data.data.reid
									}
								}else if(res.data.code==3){
									uni.showToast({
										title: res.data.msg,
										icon:'none',
										duration:2000
									});
								}else{
									uni.showToast({
										title: '网络错误',
										icon:'none',
										duration:2000
									});
								}
							},
							fail: () => {},
							complete: () => {}
						   });
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			confirmPayment(){//结算确认支付
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				uni.request({
					url: this.webUrl+'/user/pay/wxOvertime',
					method: 'PUT',
					data: {
						id:this.reid,
						overtime_way:this.payNum
					},
					success: res => {
						console.log(res)
						if(res.data.code==0){
							this.paySelect=false
							uni.hideLoading()
							if(this.payNum==20){
								uni.showToast({
									title: '支付成功',
									icon:'none',
									duration:2000
								});
								setTimeout(()=>{
									uni.navigateBack({
										delta: 1
									});
								},1500)
							}else if(this.payNum==2){
								uni.requestPayment({
								    provider: 'wxpay',
								    orderInfo: res.data.data, //微信、支付宝订单数据
								    success: function (res) {
								        console.log('success:' + JSON.stringify(res));
										uni.showToast({
											title: '支付成功',
											icon:'none',
											duration:2000
										});
										setTimeout(()=>{
											uni.navigateBack({
												delta: 1
											});
										},1500)
								    },
								    fail: function (err) {
								        console.log('fail:' + JSON.stringify(err));
										uni.showToast({
											title: '支付失败',
											icon:'none',
											duration:2000
										});
								    }
								});
							}else if(this.payNum==10){
								uni.requestPayment({
								    provider: 'alipay',
								    orderInfo: pay.data.data, //微信、支付宝订单数据
								    success: function (res) {
								        console.log('success:' + JSON.stringify(res));
										uni.showToast({
											title: '支付成功',
											icon:'none',
											duration:2000
										});
										setTimeout(()=>{
											uni.navigateBack({
												delta: 1
											});
										},1500)
								    },
								    fail: function (err) {
								        console.log('fail:' + JSON.stringify(err));
										uni.showToast({
											title: '支付失败',
											icon:'none',
											duration:2000
										});
								    }
								});
							}
						}
					},
					fail: () => {
						uni.hideLoading()
					},
					complete: () => {}
				});
			},
			CancellationPayment(){ //取消支付
				this.paySelect=false
			},
			openAddress(info){
				uni.navigateTo({
					url: '../map/map?info='+JSON.stringify(info),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body{
		height: 100%;
	}
	page{
		height: 100%;
	}
	.container{
		position: absolute;
		left: 0;
		bottom: 0;
		top: 0;
		right: 0;
		overflow: hidden;
		background: #f2f2f2;
		.top{
			margin-top: 22upx;
			display: flex;
			background: #FFFFFF;
			height: 120upx;
			image{
				width: 80upx;
				height: 80upx;
				margin: 20upx 28upx 20upx 30upx;
			}
			.info{
				font-size:24upx;
				margin-top: 22upx;
				line-height: 24upx;
				font-family:Microsoft YaHei;
				font-weight:bold;
				color:rgba(51,51,51,1);
				.num{
					margin-top: 22upx;
					font-weight:400;
				}
			}
			.boda{
				width:72upx;
				height:30upx;
				background:rgba(254,86,33,1);
				border-radius:10upx;
				font-size:20upx;
				text-align: center;
				line-height: 30upx;
				margin-top: 42upx;
				margin-left: 230upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(253,252,252,1);
			}
		}
		.mid{
			background: #FFFFFF;
			overflow: hidden;
			margin-top: 20upx;
			.mid_title{
				margin: 22upx 30upx 14upx;
				display: flex;
				font-size:24upx;
				justify-content: space-between;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(52,52,52,1);
			}
			.address{
				position: relative;
				margin: 0 30upx;
				border-bottom: 2upx solid #FFE9E2;
				border-top: 2upx solid #FFE9E2;
				.qi{
					margin-top: 26upx;
					padding-bottom: 28upx;
					display: flex;
					image{
						margin-top: 4upx;
						width: 44upx;
						height: 44upx;
					}
					.qi_title{
						margin-left: 22upx;
						font-size:28upx;
						line-height: 28upx;
						font-family:Microsoft YaHei;
						font-weight:400;
						color:rgba(52,52,52,1);
						.qi_title_text{
							font-size:20upx;
							// line-height: 20upx;
							font-family:Microsoft YaHei;
							font-weight:400;
							color:rgba(102,102,102,1);
						}
					}
				}
				.openAddress{
					position: absolute;
					left: 616upx;
					top: 142upx;
					width: 74upx;
					height: 32upx;
					background: #FE5621;
					font-size:20upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(253,252,252,1);
					border-radius:10upx;
					text-align: center;
					line-height: 32upx;
				}
			}
			.information{
				margin: 0upx 30upx;
				.item{
					position: relative;
					display: flex;
					font-size:24upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(52,52,52,1);
					padding: 22upx 0;
					image{
						width: 40upx;
						margin-right: 22upx;
						height: 40upx;
					}
					.mingxi{
						position: absolute;
						right: 0;
					}
				}
				.tips{
					text-align: right;
					font-size:18upx;
					padding: 24upx 0;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(102,102,102,1);
				}
			}
		}
		.btn{
			width: 100%;
			height: 80upx;
			position: absolute;
			bottom: 0;
			background:rgba(254,86,33,1);
			font-size:30upx;
			text-align: center;
			line-height: 80upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(252,252,252,1);
		}
		.payment{
			position: fixed;  
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background: rgba(0,0,0,.6);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.paymentez{
				background: #FFFFFF;
				border-radius: 10upx;
				.title{
					text-align: center;
					padding: 30upx 0;
					font-size: 32upx;
				}
				.itemBox{
					.item{
						padding: 20upx;
						display: flex;
						width: 400upx;
						align-items: center;
						position: relative;
						.text{
							font-size: 32upx;
							padding-left: 30upx;
						}
						.quan{
							width: 32upx;
							height: 32upx;
							border-radius: 50upx;
							border: 2upx solid #000000;
							position: absolute;
							right: 20upx;
							.Selection{
								width: 20upx;
								height: 20upx;
								border-radius: 50%;
								background: rgba(254,86,33,1);
								margin: 6upx auto;
							}
						}
					}
					image{
						width: 50upx;
						height: 50upx;
					}
				}
				.payBtn{
					display: flex;
					margin-top: 30upx;
					padding: 0 20upx;
					margin-bottom: 20upx;
					justify-content: space-between;
					.qx{
						background: rgba(254,86,33,1);
						padding: 10upx;
						font-size: 32upx;
						color: #FFFFFF;
						border-radius: 10upx;
					}
				}
			}
		}
	}
</style>
